<template>
  <div>
    <div class="chart1" ref="chart1"></div>
    <div class="chart2" ref="chart2"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
  name: "DashBoard",
  data() {
    return {
      myChart: null,
      chart2: null,
    };
  },
  methods: {
    initChart2() {
      axios
        .get("https://geo.datav.aliyun.com/areas_v3/bound/340100_full.json")
        .then((res) => {
          echarts.registerMap("hefei", { geoJSON: res.data });
          const chart2 = echarts.init(this.$refs.chart2);
          chart2.setOption({
            series: [
              {
                type: "map",
                map: "hefei",
                data: [
                  {
                    name: "瑶海区",
                    value: 100,
                    tooltip: {},
                  },
                ],
              },
            ],
          });
        });
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.chart1);

      // 指定图表的配置项和数据
      const option = {
        // title: {
        //   text: "{a|这是a标签内容}",
        //   textStyle: {
        //     color: "#dc3344",
        //     rich: {
        //       a: {
        //         width: 100,
        //         height: 100,
        //         color: "#fc5",
        //         backgroundColor: {
        //           image:
        //             "https://img1.baidu.com/it/u=2443895538,1755226638&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        //         },
        //       },
        //     },
        //   },
        // },
        tooltip: {
          axisPointer: {
            type: "cross",
          },
          trigger: "axis",
          formatter: "{a0}:\n {b0}\n {c0} 件 <br> {a1}:\n {b1}\n {c1} 元", // a 系列名 b 数据名 c数据值
        },
        legend: {
          // formatter: "系列:{name}",
          data: [
            {
              name: "销量",
              icon:
                "image://https://img0.baidu.com/it/u=1283150498,416567485&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666",
            },
            {
              name: "利润",
            },
          ],
        },
        xAxis: {
          name: "我是x轴",

          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          // 轴线
          axisLine: {
            lineStyle: {
              color: "red",
            },
          },
          axisTick: {
            lineStyle: {
              color: "blue",
            },
          },
          axisLabel: {
            rotate: 45,
            margin: 15,
          },
        },
        yAxis: {
          // min: 0,
          // max: 100,
          splitNumber: 10,
          interval: 7,
        },
        dataZoom: [
          {
            type: "inside",
          },
          {
            type: "slider",
          },
        ],
        visualMap: [
          /* {
            type: "piecewise",
            splitNumber: 5,
            min: 0,
            max: 50,
            color: ["#E41D4A", "#9DE41D"],
          }, */
          {
            type: "continuous",
            min: 0,
            max: 50,
            range: [0, 45],
            calculable: true,
            color: ["#E41D4A", "#9DE41D"],
          },
        ],
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
          {
            name: "利润",
            type: "line",
            data: [12, 4, 45, 7, 22, 34],
          },
        ],

        color: ["#B9E41D", "#50CE5D"],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      this.myChart = myChart;
    },
  },
  mounted() {
    this.initChart();
    this.initChart2();
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.chart1 {
  max-width: 800px;
  height: 600px;
}
.chart2 {
  max-width: 800px;
  height: 600px;
}
</style>
